<template>
  <div class="Home">
    <div>放个图标</div>
    <div>代办列表</div>
    <div>公告列表</div>
    <div>用户列表</div>
    <div>异常列表</div>
  </div>
</template>

<script>
import {getCurrentInstance} from "vue"
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: "Home",
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.Home {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 8px;

  > div {
    background-color: #42b983;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;

    &:first-child {
      font-size: 14px;
      grid-column: span 2;
      grid-row: span 2;
    }

    &:nth-child(2) {
      font-size: 16px;
    }

    &:nth-child(3) {
      font-size: 18px;
      grid-row: span 2;
    }

    &:nth-child(4) {
      font-size: 20px;
    }

    &:nth-child(5) {
      font-size: 24px;
    }
  }
}
</style>